<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-on:click="方法名"
            事件函数如果不传递参数，则默认会传递原生事件对象，
            v-on的简写形式  @事件名="方法名",@后面不能加冒号
        -->
        <button v-on:click="fun(y)">v-on事件处理</button>

        <button @click="doSay(123,$event)">传递参数的形式</button> <!--如果函数传递了参数还想要拿到原生事件对象，就要用 $event进行指定-->

        <div @click="test">
            父级div
            <button @click.stop="test">.stop修饰符</button> <!---->
        </div>
    </div>
</body>

<script>
    const {createApp} = Vue;
    const app = createApp({
        data() {
            return {
                y: "123"
            }
        },
        methods: {
            // 没传递参数的情况下，绑定了事件的函数名默认都会把原生事件对象通过参数传递过来，也就是说函数的第一个参数始终是原生事件对象
            fun(x) {
                alert("v-on事件处理");
                console.log(x); // 这个x是原生事件对象
                return 1;
            },
            doSay(x,y) {
                console.log(x,y);
            },
            test() {
                console.log("按钮被点击了");
            }
        }
    }).mount("#app");
</script>
</html>